<template>
  <!-- 代理商列表 -->
  <div>
    <!-- 筛选条件 -->
    <div style="margin-bottom: 20px" class="padding_10 box">
      <el-form ref="form" :model="form" label-width="100px" size="medium">
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="代理等级：" prop="username">
              <el-select class="width_100" v-model="form.time">
                <el-option value="1" label="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="代理状态: " prop="username">
              <el-select class="width_100" v-model="form.time">
                <el-option value="1" label="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="结算账户: " prop="username">
              <el-select class="width_100" v-model="form.time">
                <el-option value="1" label="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="生效状态: " prop="username">
              <el-select class="width_100" v-model="form.time">
                <el-option value="1" label="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="margin_top_10">
          <el-col :span="5">
            <el-form-item label="" label-width="0px" prop="username">
              <div class="display_flex">
                <el-select style="width: 90px" v-model="form.time">
                  <el-option value="1" label="1"></el-option>
                </el-select>
                <div class="flex_1">
                  <el-date-picker
                    v-model="form.time"
                    class="width_100"
                    type="daterange"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions"
                  >
                  </el-date-picker>
                </div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="" label-width="0px" prop="username">
              <el-input
                placeholder="请输入内容"
                v-model="input3"
                class="input-with-select"
              >
                <el-select
                  v-model="form.input4"
                  style="width: 90px"
                  slot="prepend"
                  placeholder="请选择"
                >
                  <el-option label="餐厅名" value="1"></el-option>
                  <el-option label="订单号" value="2"></el-option>
                  <el-option label="用户电话" value="3"></el-option>
                </el-select>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="分润比例: " prop="username">
              <div class="display_flex align_items_center">
                <el-input
                  style="flex: 1"
                  placeholder=""
                  v-model="input3"
                  class="input-with-select"
                >
                  <i slot="suffix">%</i>
                </el-input>
                <div class="conterBox"></div>
                <el-input
                  style="flex: 1"
                  placeholder=""
                  v-model="input4"
                  class="input-with-select"
                >
                  <i slot="suffix">%</i>
                </el-input>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <div class="width_100 display_flex butBox">
              <!-- <div class="flex_1"></div> -->
              <el-button class="but1 butQuery" size="mini">查询</el-button>
              <el-button class="but1">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 数据展示 -->
    <el-card class="box-card" style="margin-bottom: 20px">
      <div style="display: flex; justify-content: space-evenly">
        <div class="data_look data_look1">
          <div class="img_text">256879个</div>
          <div class="zc_text">代理商总数</div>
        </div>
        <div class="data_look data_look2">
          <div class="img_text" style="color: #5c56ff">256879个</div>
          <div class="zc_text" style="color: #5c56ff">正常代理总数</div>
        </div>
        <div class="data_look data_look3">
          <div class="img_text" style="color: #ff8e4f">256879个</div>
          <div class="zc_text" style="color: #ff8e4f">账户绑定总数</div>
        </div>
        <div class="data_look data_look4">
          <div class="img_text" style="color: #5f95b2">256879个</div>
          <div class="zc_text" style="color: #5f95b2">注册商户总数</div>
        </div>
        <div class="data_look data_look5">
          <div class="img_text" style="color: #3d8e77">256879个</div>
          <div class="zc_text" style="color: #3d8e77">关联设备树</div>
        </div>
      </div>
    </el-card>
    <!-- 列表 -->
    <el-card class="box-card" style="margin-bottom: 20px">
      <el-button
        type="success"
        @click="add()"
        style="
          float: left;
          padding: 3px 0;
          width: 110px;
          height: 32px;
          margin-bottom: 10px;
          background-color: #3f75ff;
        "
        >添加代理商</el-button
      >
      <el-table
        :header-cell-style="{ background: '#E6EFFF' }"
        :data="list"
        style="width: 100%"
      >
        <el-table-column type="index" label="序号" width="100">
        </el-table-column>
        <el-table-column prop="date" label="代理编号" width="180">
        </el-table-column>
        <el-table-column label="代理商全称" min-width="180">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>{{ scope.row.name }}</p>
              <div slot="reference" class="name-wrapper">
                {{ scope.row.name }}
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="代理商姓名" width="180">
        </el-table-column>
        <el-table-column prop="date" label="手机号" width="180">
        </el-table-column>
        <el-table-column prop="date" label="代理等级" width="180">
        </el-table-column>
        <el-table-column prop="" label="子代理数" width="180">
          <template slot-scope="scope">
            <div class="color" @click="detailAll(scope.row, '1', '子代里列表')">
              {{ scope.row.num }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="num" label="分润比例(%)" width="180">
          <!-- <template slot-scope="scope">
            <div class="color" @click="detailAll(scope.row, '2', '0')">
              {{ scope.row.num }}
            </div>
          </template> -->
        </el-table-column>
        <el-table-column prop="" label="注册商户数" width="180">
          <template slot-scope="scope">
            <div class="color" @click="detailAll(scope.row, '3', '商户列表')">
              {{ scope.row.num }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="" label="关联设备数" width="180">
          <template slot-scope="scope">
            <div class="color1" @click="detailAll(scope.row, '4', '设备列表')">
              {{ scope.row.num }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="代理状态" width="180">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              @change="switchs(scope.row.status, scope.row.id)"
              :active-value="1"
              :inactive-value="2"
              size="mini"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="结算账户" width="180">
        </el-table-column>
        <el-table-column prop="time" label="有效日期" width="180">
          <template slot-scope="scope">
            {{
              scope.row.time == 0 ? "永久有效" : `过期时间:${scope.row.time}`
            }}
          </template>
        </el-table-column>
        <el-table-column prop="state" label="生效状态" width="180">
          <template slot-scope="scope">
            {{ scope.row.state == 1 ? "生效中" : "已过期" }}
          </template>
        </el-table-column>
        <el-table-column prop="address" label="添加时间"> </el-table-column>
        <el-table-column
          header-align="center"
          label="操作"
          width="150"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              @click="Detail('1', scope.row.id)"
              >编辑</el-button
            >
            <el-button
              type="text"
              size="mini"
              @click="ASetting('2', scope.row.id)"
              >结算账户</el-button
            >
            <el-dropdown>
              <span class="el-dropdown-link" style="color: #3f75ff">
                &nbsp; &nbsp;...
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <el-button
                    size="mini"
                    type="text"
                    @click="Detail('2', scope.row.id)"
                    >详情</el-button
                  >
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button
                    size="mini"
                    type="text"
                    @click="accountChange(scope.row.id)"
                    >账号设置</el-button
                  >
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <div style="text-align: right; margin-right: 90px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
      >
      </el-pagination>
    </div>
    <!-- 结算账号设置 -->
    <el-dialog
      :title="title"
      :visible.sync="centerDialogVisible"
      width="40%"
      center
    >
      <div v-if="dialogType == 1">
        <div class="layui-row layui-col-space15">
          <div class="layui-col-md12">
            <!-- <div style="border-bottom: 1px solid #eee; padding-bottom: 10px">
        设置提现账号
      </div> -->
            <div
              style="
                background: #f8f8f8;
                padding: 10px;
                font-size: 12px;
                white-space: pre-wrap;
              "
            >
              说明： 对公税点6%，对私税点8%。
            </div>
            <el-form
              label-width="100px"
              ref="form"
              :rules="fenzhangRules"
              :model="form"
            >
              <el-form-item label="提现类型" prop="withdrawals_type">
                <el-radio-group v-model="form.withdrawals_type">
                  <el-radio label="1">对公账户</el-radio>
                  <el-radio label="2">对私账户</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="银行名称" prop="withdrawals_bank">
                <el-select
                  style="width: 100%"
                  v-model="form.withdrawals_bank"
                  filterable
                  placeholder="请选择收款银行"
                >
                  <el-option
                    v-for="item in bankList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="开户行名称" prop="withdrawals_bank">
                <el-select
                  style="width: 100%"
                  v-model="form.withdrawals_bank"
                  filterable
                  placeholder="请选择开户行名称"
                >
                  <el-option
                    v-for="item in bankList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="账户户名" prop="bank_card_holder">
                <el-input
                  v-model="form.bank_card_holder"
                  placeholder="请输入账户户名"
                ></el-input>
              </el-form-item>
              <el-form-item label="预留手机号" prop="phone">
                <el-input
                  v-model="form.phone"
                  placeholder="预留手机号"
                ></el-input>
              </el-form-item>
              <el-form-item
                v-if="form.withdrawals_type == 1"
                label="公户账号"
                prop="bank_card_number"
              >
                <el-input
                  v-model="form.bank_card_number"
                  placeholder="请输入公户账号"
                  type="number"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="银行账号"
                prop="bank_card_number"
                v-if="form.withdrawals_type == 2"
              >
                <el-input
                  v-model="form.bank_card_number"
                  placeholder="请输入银行账号"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="身份证号码"
                prop="id_card_number"
                v-if="form.withdrawals_type == 2"
              >
                <el-input
                  v-model="form.id_card_number"
                  placeholder="请输入身份证号码"
                ></el-input>
              </el-form-item>
              <el-form-item
                v-if="form.withdrawals_type == '1'"
                label="营业执照"
                prop="business_license_photo"
              >
                <template>
                  <div class="deleteClass4" v-if="form.business_license_photo">
                    <div class="father_box">
                      <div v-if="form.business_license_photo" class="item_box">
                        <i
                          @click="see_icon(form.business_license_photo)"
                          class="el-icon-zoom-in"
                        ></i>
                        <i @click="deleteimg(1)" class="el-icon-delete"></i>
                      </div>
                      <el-image
                        :src="form.business_license_photo"
                        class="upload_img"
                      >
                      </el-image>
                    </div>
                  </div>
                  <el-upload
                    v-else
                    class="avatar-uploader"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :show-file-list="false"
                    :http-request="uploadFile1"
                  >
                    <div class="upload_img">
                      <i class="el-icon-plus i_tetx"></i>
                      <div class="el-upload__text div_tetx">上传营业执照</div>
                    </div>
                  </el-upload>
                </template>
              </el-form-item>
              <el-form-item
                label="证件资料"
                prop="id_card_just"
                v-if="form.withdrawals_type == 2"
              >
                <div style="display: flex">
                  <template v-if="form.withdrawals_type == 2">
                    <div class="img_main">
                      <div v-if="form.id_card_just" class="Simg">
                        <div class="deleteClass">
                          <div class="father_box">
                            <div v-if="form.id_card_just" class="item_box">
                              <i
                                @click="see_icon(form.id_card_just)"
                                class="el-icon-zoom-in"
                              ></i>
                              <i
                                @click="deleteimg(2)"
                                class="el-icon-delete"
                              ></i>
                            </div>
                            <el-image
                              :src="form.id_card_just"
                              class="upload_img"
                            >
                            </el-image>
                          </div>
                        </div>
                        <!-- <i class="el-icon-delete"></i> -->
                      </div>
                      <el-upload
                        v-if="form.id_card_just == ''"
                        class="avatar-uploader"
                        action="string"
                        :http-request="uploadFile2"
                      >
                        <div class="img_desc">
                          <i class="el-icon-plus el-icon-plus-main"></i>
                          <p>身份证正面</p>
                        </div>
                      </el-upload>
                    </div>
                    <div class="img_main">
                      <div v-if="form.id_card_back" class="Simg1">
                        <div class="deleteClass1">
                          <div class="father_box">
                            <div v-if="form.id_card_back" class="item_box">
                              <i
                                @click="see_icon(form.id_card_back)"
                                class="el-icon-zoom-in"
                              ></i>
                              <i
                                @click="deleteimg(3)"
                                class="el-icon-delete"
                              ></i>
                            </div>
                            <el-image
                              :src="form.id_card_back"
                              class="upload_img"
                            >
                            </el-image>
                          </div>
                        </div>
                      </div>
                      <el-upload
                        v-if="form.id_card_back == ''"
                        class="avatar-uploader"
                        action="string"
                        :http-request="uploadFile3"
                      >
                        <div class="img_desc">
                          <i class="el-icon-plus el-icon-plus-main"></i>
                          <p>身份证反面</p>
                        </div>
                      </el-upload>
                    </div>
                    <div class="img_main">
                      <div v-if="form.bank_img" class="Simg2">
                        <div class="deleteClass2">
                          <div class="father_box">
                            <div v-if="form.bank_img" class="item_box">
                              <i
                                @click="see_icon(form.bank_img)"
                                class="el-icon-zoom-in"
                              ></i>
                              <i
                                @click="deleteimg(4)"
                                class="el-icon-delete"
                              ></i>
                            </div>
                            <el-image :src="form.bank_img" class="upload_img">
                            </el-image>
                          </div>
                        </div>
                      </div>
                      <el-upload
                        v-if="form.bank_img == ''"
                        class="avatar-uploader"
                        action="string"
                        :http-request="uploadFile4"
                      >
                        <div class="img_desc">
                          <i class="el-icon-plus el-icon-plus-main"></i>
                          <p>银行卡照片</p>
                        </div>
                      </el-upload>
                    </div>
                  </template>
                </div>
              </el-form-item>
              <el-form-item style="padding-bottom: 20px">
                <el-button type="primary" @click="fenzhangSaveFn"
                  >确定</el-button
                >
                <el-button type="default" @click="cancelFn(1)">取消</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
      <div v-else>
        <el-form
          label-width="100px"
          ref="formName"
          :rules="zhanghaoRules"
          :model="formName"
        >
          <el-form-item label="手机号" prop="phone">
            <el-input
              v-model="formName.phone"
              placeholder="请输入手机号"
              style="width: 350px"
            ></el-input>
          </el-form-item>
          <el-form-item label="登录账号" prop="username">
            <el-input
              v-model="formName.username"
              placeholder="请输入登录账号"
              style="width: 350px"
            ></el-input>
          </el-form-item>
          <el-form-item label="设置密码" prop="password">
            <el-input
              show-password
              v-model="formName.password"
              placeholder="请设置密码"
              style="width: 350px"
            ></el-input>
          </el-form-item>
          <div style="margin-left: 63px; font-size: 10px; color: #ff5252">
            备注：首次登陆密码或重置后的密码默认手机号码后6位
          </div>
          <div style="text-align: center; margin-top: 20px">
            <el-button style="color: #0067d9" @click="fenzhangSaveFn(1)"
              >保存</el-button
            >
            <el-button style="color: #0067d9" @click="resetPwa(1)"
              >重置密码</el-button
            >
            <el-button style="color: #0067d9" @click="cancelFn">取消</el-button>
          </div>
        </el-form>
      </div>
    </el-dialog>
    <el-dialog title="查看图片" width="50%" :visible.sync="imgStatus">
      <img :src="see_imgUrl" class="width_100" alt="" />
    </el-dialog>
  </div>
</template>
<script>
import { get, post, tipsFun } from "../../../util/request.js"
export default {
  data () {
    return {
      see_imgUrl: "",
      imgStatus: false,
      currentPage4: 4,
      dialogType: "",
      bankList: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      // 结算账户类型
      radio: "1",
      pickerOptions: {
        shortcuts: [
          {
            text: "生效结束时间",
            onClick: picker => {
              this.timeType = 1
              console.log("现在是生效时间", this.timeType)
            }
          },
          {
            text: "按添加时间",
            onClick: picker => {
              this.timeType = 2
              console.log("现在是生效时间", this.timeType)
            }
          }
        ]
      },
      form: {
        id: "",
        withdrawals_type: "1",
        withdrawals_bank: "",
        bank_card_holder: "",
        bank_card_number: "",
        id_card_number: "", // 身份证号码
        // 营业执照
        business_license_photo: "",
        // 身份证正面
        id_card_just: "",
        // 身份证正面
        id_card_back: "",
        // 银行卡照片
        bank_img: "",
        phone: ""
      },
      fenzhangRules: {
        withdrawals_type: [
          { required: true, message: "请选择分账时间", trigger: "blur" }
        ],
        withdrawals_bank: [
          { required: true, message: "请选择收款银行", trigger: "change" }
        ],
        bank_card_holder: [
          { required: true, message: "请输入账户户名", trigger: "blur" }
        ],
        bank_card_number: [
          { required: true, message: "请输入银行账号", trigger: "blur" },
          {
            pattern: /^\d{1,22}$/,
            message: "请输入正确的银行卡格式",
            trigger: "blur"
          }
        ],
        id_card_number: [
          { required: true, message: "请输入身份证号码", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              let reg =
                /(^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|[xX])$)|(^((\s?[A-Za-z])|([A-Za-z]{2}))\d{6}(\([0−9aA]\)|[0-9aA])$)|(^[a-zA-Z][0-9]{9}$)|(^[1|5|7][0-9]{6}\([0-9Aa]\))/
              if (!reg.test(value)) {
                return callback(new Error("请输入正确的身份证号码格式"))
              }
              callback()
            },
            trigger: "blur"
          }
        ],
        phone: [
          { required: true, message: "请输入预留手机号", trigger: "blur" },
          {
            pattern: /^1\d{10}$/,
            message: "请输入正确的手机号",
            trigger: "blur"
          }
        ],
        id_card_just: [
          { required: true, message: "请上传相关资料", trigger: "blur" }
        ],
        business_license_photo: [
          { required: true, message: "请上传相关资料", trigger: "blur" }
        ]
      },
      formName: {
        phone: "",
        username: "",
        password: ""
      },
      zhanghaoRules: {
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^1\d{10}$/,
            message: "请输入正确的手机号",
            trigger: "blur"
          }
        ],
        username: [
          { required: true, message: "请输入登录账号", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            pattern: /^.{1,8}$/,
            message: "密码最多8位",
            trigger: "blur"
          }
        ]
      },
      back: "", // \{\$\back\}
      timeType: "",
      timeValue: "",
      list: [
        {
          name: "张三",
          date: "2023-10-26",
          address: "山东省济南市历下区泉城路",
          num: 12,
          state: "1",
          time: "0"
        },
        {
          name: "李四",
          date: "2023-10-26",
          address: "山东省济南市历下区泉城路",
          num: 5,
          state: "2",
          time: "2023-11-8"
        }
      ],
      centerDialogVisible: false,
      title: "",
      timeState: "",
      search: {},
      dataRange: [],
      dataRange2: [],
      status: "",
      loading: false,
      tableData: [],
      page: 1,
      limit: 10,
      total: 0,
      keyword: "",
      labelClassDialog: false, // 插件页
      plugloading: false,
      PageObj: {
        page: 1,
        limit: 10,
        total: 0
      },
      agentid: "", // 代理商id
      plugtableData: [],
      centerDialogRecharge: false, //充值弹窗
      activeSet: "1",
      labelName: "充值金额：",
      rules: {
        price: [
          { required: true, message: "请输入金额", trigger: "blur" },
          {
            pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{0,2})?$/,
            message: "金额必须大于 0，且最多保留2位小数",
            trigger: "blur"
          }
        ]
      }
    }
  },
  watch: {
    timeState () {
      console.log("数据发生变化")
      this.timeValue = ""
    }
  },
  methods: {
    del_icon () {
      this.imageUrl = ""
      console.log("删除照片")
    },
    see_icon (url) {
      this.imgStatus = true
      this.see_imgUrl = url
    },

    changeState () {
      console.log("选择的时间类型", this.timeState)
    },
    // 删除照片
    deleteimg (options) {
      if (options == 1) {
        this.form.business_license_photo = ""
      } else if (options == 2) {
        this.form.id_card_just = ""
      } else if (options == 3) {
        this.form.id_card_back = ""
      } else if (options == 4) {
        this.form.bank_img = ""
      }
    },
    // 上传照片
    uploadFile1 (res, file) {
      let istype =
        res.file.type == "image/jpeg" ||
        res.file.type == "image/png" ||
        res.file.type == "image/jpg"
      if (!istype) {
        return tipsFun(this, "error", "只能上传JPG、PNG、JPEG格式文件")
      }
      if (res.file.size < 1) {
        return tipsFun(this, "error", "文件大小错误")
      }
      let formData = new FormData()
      formData.append("image", res.file)
      this.uploadFile(formData, 1)
    },
    uploadFile2 (res, file) {
      let istype =
        res.file.type == "image/jpeg" ||
        res.file.type == "image/png" ||
        res.file.type == "image/jpg"
      if (!istype) {
        return tipsFun(this, "error", "只能上传JPG、PNG、JPEG格式文件")
      }
      if (res.file.size < 1) {
        return tipsFun(this, "error", "文件大小错误")
      }
      let formData = new FormData()
      formData.append("image", res.file)
      this.uploadFile(formData, 2)
    },
    uploadFile3 (res, file) {
      let istype =
        res.file.type == "image/jpeg" ||
        res.file.type == "image/png" ||
        res.file.type == "image/jpg"
      if (!istype) {
        return tipsFun(this, "error", "只能上传JPG、PNG、JPEG格式文件")
      }
      if (res.file.size < 1) {
        return tipsFun(this, "error", "文件大小错误")
      }
      let formData = new FormData()
      formData.append("image", res.file)
      this.uploadFile(formData, 3)
    },
    uploadFile4 (res, file) {
      let istype =
        res.file.type == "image/jpeg" ||
        res.file.type == "image/png" ||
        res.file.type == "image/jpg"
      if (!istype) {
        return tipsFun(this, "error", "只能上传JPG、PNG、JPEG格式文件")
      }
      if (res.file.size < 1) {
        return tipsFun(this, "error", "文件大小错误")
      }
      let formData = new FormData()
      formData.append("image", res.file)
      this.uploadFile(formData, 4)
    },
    uploadFile (formData, options) {
      console.log("上传照片", formData, "照片类型", options)
      if (options == 1) {
        this.form.business_license_photo =
          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
      } else if (options == 2) {
        this.form.id_card_just =
          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
      } else if (options == 3) {
        this.form.id_card_back =
          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
      } else if (options == 4) {
        this.form.bank_img =
          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
      }
    },
    // 分页
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    },
    // 子列表
    detailAll (val, type_id, name) {
      if (type_id == 1) {
        this.$router.push({
          name: "SecondaryList",
          params: {
            id: type_id,
            parameter: "子代理列表"
          }
        })
      } else if (type_id == 3) {
        this.$router.push({
          name: "SecondaryList",
          params: {
            id: type_id,
            parameter: "商户列表"
          }
        })
      } else {
        this.$router.push({
          name: "SecondaryList",
          params: {
            id: type_id,
            parameter: "设备列表"
          }
        })
      }
    },
    // 重置密码
    resetPwa (id) {
      console.log("密码已经重置", id)
    },
    // 设置账号
    accountChange () {
      this.dialogType = 2
      this.title = "账号设置"
      this.centerDialogVisible = true
    },
    // 设置结算账号
    fenzhangSaveFn (val) {
      var that = this
      if (val == 1) {
        this.$refs.formName.validate(valid => {
          if (valid) {
            console.log("没毛病铁子")
            this.centerDialogVisible = false
          } else {
            console.log("校验没有通过")
          }
        })
      } else {
        this.$refs.form.validate(valid => {
          if (valid) {
            this.centerDialogVisible = false
            console.log("没毛病铁子")
          } else {
            console.log("校验没有通过")
          }
        })
      }
    },
    // 关闭弹窗
    cancelFn (val) {
      this.centerDialogVisible = false
      if (val == 1) {
        this.$refs.form.resetFields()
      } else {
        this.$refs.formName.resetFields()
      }
    },
    // 设置结算账户
    ASetting () {
      this.dialogType = 1
      this.title = "设置结算账号"
      this.centerDialogVisible = true
    },
    time () {
      if (this.isWithinOneMonth(this.timeValue[0], this.timeValue[1])) {
        if (this.timeState == 1) {
          delete this.search.add_time
          this.search.over_time = this.timeValue
        } else if (this.timeState == 2) {
          delete this.search.over_time
          this.search.add_time = this.timeValue
        }
      } else {
        tipsFun(this, "error", "最多只能查询一个月内的数据")
        this.search.add_time = ""
        this.search.over_time = ""
      }
    },
    isWithinOneMonth (timestamp1, timestamp2) {
      const date1 = new Date(timestamp1)
      const date2 = new Date(timestamp2)

      const year1 = date1.getFullYear()
      const month1 = date1.getMonth()
      const day1 = date1.getDate()

      const year2 = date2.getFullYear()
      const month2 = date2.getMonth()
      const day2 = date2.getDate()

      const monthDiff = (year2 - year1) * 12 + (month2 - month1)

      if (monthDiff > 1) {
        return false
      } else if (monthDiff === 1) {
        return day2 < day1
      } else {
        return true
      }
    },

    ratio (num) {
      const value = parseInt(this.search.minimum)
      if (isNaN(value) || value < 1 || value > 100 || value % 1 !== 0) {
        // 输入不符合要求，进行相应的处理，例如提示错误信息
        tipsFun(this, "error", "请输入1-100之间的正整数")
        // 清空输入的值
        this.search.minimum = ""
      } else {
        // 输入符合要求，进行相应的处理
        var min = Number(this.search.minimum)
        var max = Number(this.search.maximum)
        console.log("输入有效", min)
        if (num == 1) {
        } else {
          if (max < min) {
            tipsFun(this, "error", "最大比例要大于初始值")
            // 清空输入的值
            this.search.maximum = ""
          }
        }
      }
    },
    see () {
      this.page = 1
      this.GetAgentList()
    },
    Plug (id) {
      this.agentid = id
      this.labelClassDialog = true
      this.PageObj = {
        page: 1,
        limit: 10,
        total: 0
      }
      this.GetPlugList()
    },
    //获取插件信息
    GetPlugList: function () {
      var vm = this
      vm.plugloading = true
    },
    currentChange (val) {
      this.PageObj.page = val
      this.GetPlugList()
    },
    editUser (id, userid) {
      var that = this
      var contenturl = "{:url('adminMei/user/setUserHtml')}"
      if (contenturl.search("\\?") != -1) {
        contenturl =
          contenturl + "&id=" + id + "&user_group=2&usersid=" + userid
      } else {
        contenturl =
          contenturl + "?id=" + id + "&user_group=2&usersid=" + userid
      }
      admin.popupRight({
        type: 2,
        title: "编辑代理商登录账号",
        area: "50%",
        content: contenturl,
        end: function () {
          that.GetAgentList()
        }
      })
    },
    add () {
      this.$router.push({
        name: "addlist",
        params: {
          parameter: "添加代理商"
        }
      })
    },
    //代理商的启用禁用
    switchs (val, id) {
      var that = this
      console.log("代理商状态", val, id)
    },
    Edit (id) {
      //编辑
      var _this = this
      location.hash = "/Agent/addlist/id=" + id
    },
    clearFn () {
      this.search = {}
      this.see()
    },
    //打开充值弹窗
    Recharge (id) {
      var that = this
      that.form.id = id
      that.centerDialogRecharge = true
    },
    //切换
    handleClick () {
      this.form.price = ""
      this.form.remarks = ""
      this.labelName = "充值金额："
      if (this.activeSet == "2") {
        this.labelName = "减少金额："
      }
    },
    // 取消充值弹窗
    cancel () {
      var that = this
      that.centerDialogRecharge = false
      that.form.price = ""
      that.form.remarks = ""
    },

    size_change (val) {
      var that = this
      that.limit = val
      that.page = 1
      that.GetAgentList()
    },
    /* 切换页数 */
    current_change (val) {
      var that = this
      that.page = val
      that.GetAgentList()
    }
  }
}
</script>

<style scoped>
#add {
  background-color: #fff !important;
}
.box-card {
  border-radius: 10px;
}
.butBox {
  margin-left: 20px;
}
.butQuery {
  background-color: #3f75ff;
  color: #fff;
}
.but1 {
  padding: 12px 40px;
}
.conterBox {
  border-bottom: 1px solid #8c8c8c;
  padding: 0px 10px;
  margin: 0px 10px;
}
.box {
  background: #ffffff;
  border-radius: 14px;
}
.item_box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.5);
  width: 86px;
  height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  color: #fff;
  z-index: 111;
  border-radius: 4px;
}
.father_box {
  position: relative;
  width: 86px;
  height: 86px;
}
/deep/ .el-table__cell {
  text-align: center;
}
.iclass {
  font-size: 22px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.deleteClass {
  position: relative;
  flex: 1;
}
.deleteClass1 {
  position: relative;
  flex: 1;
}
.deleteClass2 {
  position: relative;
  flex: 1;
}
.deleteClass4 {
  position: relative;
  flex: 1;
}
.img_main {
  margin-right: 20px;
}
.zc_text {
  font-size: 14px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  margin: 10px 0 0 15px;
}
.img_desc {
  width: 86px;
  height: 86px;
  background: #e3e3e3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  margin-right: 20px;
}

.div_tetx {
  font-size: 12px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #7c7c7c;
}
.i_tetx {
  font-size: 25px;
  margin-top: 15px;
}
.upload_img {
  width: 86px;
  height: 86px;
  background: #e3e3e3;
  border-radius: 6px 6px 6px 6px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.el-picker-panel__shortcut {
  color: red;
}
.time_box {
  display: flex;
}
.img_text {
  font-size: 22px;
  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
  font-weight: bold;
  color: #8e4e40;
  margin: 33px 0 0 15px;
}
.color1 {
  color: #23a90d;
  margin-left: 20px;
}
.color {
  color: #2395ff;
  margin-left: 20px;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
.el-form.el-form--inline .el-form-item {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.data_look {
  padding-right: 90px;
  padding-bottom: 30px;

  /* background-color: red; */
}
.data_look1 {
  color: #8e4e40;
  background-image: url("../../../assets/images/myAgent/hongse.png");
  background-repeat: no-repeat;
  background-size: cover;
}
.data_look2 {
  background-image: url("../../../assets/images/myAgent/zise.png");
  background-repeat: no-repeat;
  background-size: cover;
}
.data_look3 {
  background-image: url("../../../assets/images/myAgent/huangse.png");
  background-repeat: no-repeat;
  background-size: cover;
}
.data_look4 {
  background-image: url("../../../assets/images/myAgent/lanse.png");
  background-repeat: no-repeat;
  background-size: cover;
}
.data_look5 {
  background-image: url("../../../assets/images/myAgent/luse.png");
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
